<template>
  <view
    class="neil-modal"
    @touchmove.stop="bindTouchmove"
    v-if="isOpen === true || isOpen === 'true'"
    :style="stylecolor"
  >
    <view
      class="neil-modal__mask"
      :class="showAnimation === true || showAnimation === 'true' ? 'neil-modal--show' : ''"
      @click="closeModal"
    ></view>
    <view
      class="neil-modal__container"
      :class="showAnimation === true || showAnimation === 'true' ? 'neil-modal--show' : ''"
    >
      <view
        class="neil-modal__content"
        :class="content ? 'neil-modal--padding' : ''"
        :style="{textAlign:align}"
      >
        <view id="heading">
          <view @tap.stop="toCity">
            <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-faqiliaotian"></text>
            <text>发起群聊</text>
          </view>
          <view @tap="toAddFriends">
            <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-tianjiahaoyou"></text>
            <text>添加好友</text>
          </view>
          <view>
            <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-saoyisao"></text>
            <text>扫一扫</text>
          </view>
          <view>
            <text style="color:#949393;font-size:16px" class="lmqicon uni-icon-shouqian"></text>
            <text>收钱</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "neil-modal",
  props: {
    title: {
      //标题
      type: String,
      default: ""
    },
    content: String, //提示的内容
    align: {
      //content 的对齐方式left/center/right
      type: String,
      default: "left"
    },
    cancelText: {
      //取消按钮的文字，默认为"取消"
      type: String,
      default: "取消"
    },
    cancelColor: {
      //取消按钮颜色
      type: String,
      default: "#333333"
    },
    confirmText: {
      //确定按钮的文字，默认为"确定"
      type: String,
      default: "确定"
    },
    confirmColor: {
      //确认按钮颜色
      type: String,
      default: "#007aff"
    },
    showCancel: {
      //是否显示取消按钮，默认为 true
      type: [Boolean, String],
      default: true
    },
    show: {
      //是否显示模态框
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    return {
      isOpen: false,
      showAnimation: false,
      inWatchTimeout: false,
      inMethodsTimeout: false
    };
  },
  computed: {
    // 获取屏幕可用高度
    stylecolor() {
      var systemInfo = uni.getSystemInfoSync();
      var screenHeight = systemInfo.screenHeight;
      return `height:${screenHeight}px`;
    }
  },
  watch: {
    show(val) {
      if (this.inWatchTimeout) {
        return;
      }
      if (val) {
        this.isOpen = val;
        setTimeout(() => {
          this.showAnimation = val;
        }, 50);
      } else {
        this.showAnimation = val;
        this.inWatchTimeout = true;
        setTimeout(() => {
          this.isOpen = val;
          this.inWatchTimeout = false;
        }, 200);
      }
    }
  },
  created() {
    this.isOpen = this.show;
    setTimeout(() => {
      this.showAnimation = this.show;
    }, 50);
  },
  methods: {
    closeModal() {
      this.showAnimation = false;
      this.inMethodsTimeout = true;
      setTimeout(() => {
        this.isOpen = false;
        this.inMethodsTimeout = false;
        this.$emit("close");
      }, 200);
    },
    toCity() {
      uni.navigateTo({
        url: "/pages/FriendPage/city/city"
      });
      this.$emit("close");
    },
    toAddFriends() {
      uni.navigateTo({
        url: "/pages/FriendPage/addFriends/addFriends"
      });
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss">
$bg-color-mask: rgba(0, 0, 0, 0.5); //遮罩颜色
$bg-color-hover: #f1f1f1; //点击状态颜色

// 气泡
#heading {
  background: #fff;
}
#heading view {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  text-align: right;
}
#heading text {
  display: inline-block;
  text-align: left;
}
#heading text:nth-child(1) {
  flex: 1;
}
#heading text:nth-child(2) {
  flex: 2;
}

// .tooltip-bell {
//   position: absolute;
//   display: block;
//   left: 9rem;
//   color: #a5a6a8;
// }

// .tooltip {
//   position: absolute;
//   top: 40px;
//   right: 40px;
//   line-height: 1.5;
//   color: #27303d;
//   width: 281upx;
//   background: #fff;
//   border-radius: 5px;
//   -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
//   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
//   z-index: 9999999999999999;
// }

// .tooltip::before {
//   content: "";
//   position: absolute;
//   top: -0.4px;
//   right: 4px;
//   border-left: 20upx solid transparent;
//   border-right: 20upx solid transparent;
//   border-bottom: 15upx solid #fff;
//   transform: translateX(-14px) translateY(6px) rotateZ(131deg);
//   z-index: 999999998;
// }

// #circle {
//   position: absolute;
//   top: 0;
//   left: 0.75rem;
//   width: 0.75rem;
//   height: 0.75rem;
//   border-radius: 100%;
//   background: #f07379;
// }

[v-cloak] > * {
  display: none;
}

// 气泡
.neil-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;

  &__header {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 18upx 24upx;
    line-height: 1.5;
    color: #333;
    font-size: 32upx;
    text-align: center;

    &::after {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #e5e5e5;
      transform-origin: 0 0;
      transform: scaleY(0.5);
    }
  }

  &__container {
    position: absolute;
    top: 21%;
    left: 79%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s;
    width: 281upx;
    border-radius: 20upx;
    // background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    transition: opacity 200ms ease-in;

    view {
      /* display: inline-block; */
      padding: 10upx;
      color: #1f2022;
    }
    &::after {
      content: "";
      position: absolute;
      top: -0.4px;
      right: 4px;
      border-left: 20upx solid transparent;
      border-right: 20upx solid transparent;
      border-bottom: 15upx solid #fff;
      transform: translateX(-14px) translateY(6px) rotateZ(131deg);
      z-index: 99999999;
    }
  }

  &__content {
    position: relative;
    color: #333;
    font-size: 28upx;
    box-sizing: border-box;
    line-height: 1.5;
  }

  &__footer {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
    font-size: 32upx;
    display: flex;
    flex-direction: row;

    &-left,
    &-right {
      position: relative;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 88upx;
      font-size: 28upx;
      line-height: 88upx;
      text-align: center;
      background-color: #fff;
      color: #333;
    }

    &-right {
      color: #007aff;
    }

    &-left::after {
      content: " ";
      position: absolute;
      right: -1px;
      top: 0;
      width: 1px;
      bottom: 0;
      border-right: 1px solid #e5e5e5;
      transform-origin: 0 0;
      transform: scaleX(0.5);
    }

    &-hover {
      background-color: $bg-color-hover;
    }
  }

  &__mask {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $bg-color-mask;
    // background: #fff;
    // opacity: 0;
    // transition: opacity 1ms ease-in;
  }

  &--padding {
    padding: 32upx 24upx;
    min-height: 90upx;
  }
  &--show {
    opacity: 1;
  }
}
</style>
